<template>
  <footer>
    <div class="connect-us">
        <h4>让我们一起让区块链更贴近生活</h4>
        <button @click="layerFlag = true">联系我们</button>
    </div>
    <div id="footer">
      <nav class="footer-navlist">
        <ul>
          <li v-for="(item, index) in footerNavList" :key="index">
            <nuxt-link :to="item.path">
              {{item.name}}
              <span v-if="index !== footerNavList.length - 1">|</span>
            </nuxt-link>
          </li>
        </ul>
      </nav>
      <div>{{footerDir}}</div>
    </div>
    <!-- 弹出层 -->
    <div class="layer" v-if="layerFlag">
    <div class="layer-container">
      <div class="close" @click="layerFlag = false">
        <svg t="1562578874036" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2259" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 1016C233.6 1016 8 790.4 8 512S233.6 8 512 8 1016 233.6 1016 512 790.4 1016 512 1016z m0-960C260.8 56 56 260.8 56 512S260.8 968 512 968 968 763.2 968 512 763.2 56 512 56z" p-id="2260"></path><path d="M548.8 512l195.2-195.2c9.6-9.6 9.6-25.6 0-36.8l-1.6-1.6c-9.6-9.6-25.6-9.6-35.2 0L512 475.2 316.8 280c-9.6-9.6-25.6-9.6-35.2 0l-1.6 1.6c-9.6 9.6-9.6 25.6 0 36.8L475.2 512 280 707.2c-9.6 9.6-9.6 25.6 0 36.8l1.6 1.6c9.6 9.6 25.6 9.6 35.2 0L512 548.8l195.2 195.2c9.6 9.6 25.6 9.6 35.2 0l1.6-1.6c9.6-9.6 9.6-25.6 0-36.8L548.8 512z" p-id="2261"></path></svg>
      </div>
      <h5>联系客服</h5>
      <div class="tel">
        <span class="icon">
          <svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.99 19.49"><defs><style>.cls-1{fill:#1f58a9;}</style></defs><title>lianxiwomen-1</title><path class="cls-1" d="M753.91,377.74s1.5-3.18,4,0,0,4.12,0,4.12-1.68,1.59-.37,2.62,4.49,3.83,4.49,3.83,1.26,1.68,2.62.47c1.68-1.4,2.34-1.64,3.64-.66,2.29,1.7,3,3.42-.46,4.77-3.84,1.87-10.66-4.58-10.66-4.58s-6.74-6.45-3.28-10.57Zm8.7,1.65a.91.91,0,0,1-1-1.18c.1-.6,1.12-.8,2.06-.51s4.44,1.82,4.58,5.75c0,0-.26,1.1-1.08.88s-.65-1.9-.7-2.23a4.07,4.07,0,0,0-3.83-2.72ZM765,376a1.12,1.12,0,0,1-1.26-1.44c.13-.73,1.38-1,2.52-.63s5.44,2.23,5.61,7c0,0-.37,1.5-1.31,1.09s-.87-2.39-.92-2.79A4.87,4.87,0,0,0,765,376Zm0,0" transform="translate(-752.92 -373.75)"/></svg>
        </span>
        <span class="tels">17338102779</span>
      </div>
      <div class="qrcode">
        <img src="../assets/qrcode.png" alt="">
      </div>
      <p>官网微信</p>
    </div>
    </div>
  </footer>
</template>

<script>
export default {
  name: "footers",
  data() {
    return {
      layerFlag:false,
      footerNavList: [
        {
          name: "首页",
          path: "/"
        },
        {
          name: "服务",
          path: "/service/numberWallet"
        },
        {
          name: "区块链",
          path: "/blockchain"
        },
        {
          name: "案例",
          path: "/case"
        },
        {
          name: "关于我们",
          path: "/about"
        }
      ],
      footerDir:
        "以多中心化信任为核心，打造新一代价值流通网络，让数字资产都自由流动起来"
    };
  }
};
</script>

<style lang="stylus" scoped>
@import '../static/styl/mixin.styl'
.connect-us
    width 100%
    height 290px
    background-color #F5F5F5
    padding-top 103px
    text-align center
    h4
        text-align center
        margin 0 auto 54px
        font-size 42px
        color #9FA3B1
    button
        padding 13px 36px
        border-radius 6px
        border 1px solid #A2A6B4
        font-size 16px
        color #A2A6B4
        cursor pointer
#footer
  width 100%
  height 350px
  color #fff
  text-align center
  bgImg('../assets/footer_bg.png', contain)
  background-color #223162
  background-position right 90px
  .footer-navlist
    ul
      box-sizing border-box
      padding 135px 0 20px
      display flex
      justify-content center
      li
        a
          display block
          color #fff
          span
            padding 0 15px
.layer
  position fixed
  top 0
  left 0
  bottom 0
  width 100%
  background:rgba(23,41,93,.5);
  z-index 99
  overflow hidden
  .layer-container
    border-radius 6px;
    width 320px
    height 367px
    background-color #fff
    positCenter(50%, auto, auto, 50%, -50%, -50%);
    h5
      text-align center
      font-size 18px
      color #0F2255
      margin 35px auto 42px
    .tel
      text-align center
      display flex
      justify-content center
      margin-bottom 20px
      .icon
        display block
        width 19px
        height 19px
        margin-right 24px
        svg
          width 100%
          height 100%
      .tels
        font-size 16px
        color #1F58A9
    .qrcode
        width 180px
        height 180px
        text-align center
        margin 0 auto
    p
      text-align center
      letter-spacing 6px
      margin-top 7px
      font-size 12px
      color #0F2255
    .close
      cursor pointer
      width 20px
      height 20px
      positCenter(-20px, -30px, auto, auto, -50%, -50%);
      svg
        fill #fff
        width 100%
        height 100%
</style>